<template>
  <div id="app">
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">外出申请</mt-tab-item>
      <mt-tab-item id="2">外出记录</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <out-apply></out-apply>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <out-item
          v-for="item in items"
          v-bind:key="item.outDate"
          v-bind:item="item"
        ></out-item>
        <div
          class="mint-text bh-color-gray-3 OPjfbvuua8 mt-color-default"
          style="
            color: #92969c !important;
            position: relative;
            word-break: break-word;
            text-align: center;
          "
        >
          没有更多了~
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import OutItem from "./components/OutItem.vue";
import OutApply from "./components/OutApply.vue";
import axios from "axios";
export default {
  name: "App",
  components: {
    OutItem,
    OutApply,
  },
  data() {
    return {
      selected: "1",
      items: [],
      person: {
        name: "",
        number: "",
        college: "",
      },
    };
  },
  mounted() {
    let self = this;
    axios.get("../basic.json").then((res) => {
      self.items = res.data.items;
      self.person = res.data.person;
    });
  },
};
</script>
<style scoped src="../public/style.css"></style>
<style scoped src="../public/skin.css"></style>

<style scoped>
/* @import ; */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
#app {
  background-color: #f9f9f9;
}
</style>
